<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .vv1{
          width: 300px;
          height: 300px;
          background: linear-gradient(to left,rgb(14, 13, 13) 2%, #eee 50%,#fff 50%);
          border-radius: 50%;
      }
      .vv2{
          width: 400px;
          height: 200px;
          background: radial-gradient( blue,blue 50%,red 50%,red);
      }
      .vv3{
          width: 400px;
          height: 260px;
          background: radial-gradient(circle , red 30%, #fff 30%);
      }
      .vv4{
          width: 150px;
          height: 140px;
          background: repeating-radial-gradient(at left bottom, #ccc,#ccc 10%,#fff 10%,#fff 20%);
          border-radius: 0 70% 0 0;
      }
    
    </style>
</head>
<body>
    <!-- 渐变色 -->
    <div class="vv1"></div>
    <div class="vv2"></div>
    <div class="vv3"></div>
    <div class="vv4"></div>
</body>
</html>